<template>
  <div style="display: flex">
    <div id="sumchart" style="width: 99%; height: 600px"></div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

let props = defineProps({
  uid: ref(),
  item: ref(),
  paneName: ref(),
  activeName: ref(),
});
</script>

<script>
import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
import { nextTick, ref, watch } from "vue";

export default {
  data() {
    return {
      bomInfos: [],
      chartDatas: [],
    };
  },
  mounted: function () {
    this.$emit("setMultiSelect", false);
    setTimeout(() => {
      if (this.uid != null && this.uid.length > 0) {
        this.loadBomInfo();
      }
    }, 800);
  },
  created() {
    watch(
      () => this.uid,
      (newUid, oldUid) => {
        console.log("uid =>", newUid, oldUid);
        this.loadBomInfo();
      }
    ),
      watch(
        () => this.activeName,
        (newName, curName) => {
          console.log("newName ==>" + newName);
          if (newName == this.paneName) {
            this.loadBomInfo();
          }
        }
      );
  },
  methods: {
    loadBomInfo() {
      console.log("查询SECTION信息");
      this.isSearching = true;
      const url =
        "/getBomInfo2?parentUid=" + this.uid + "&childType=P8_SectionRevision";
      console.log(url);
      this.$http
        .get(url)
        .then((response) => {
          console.log("查询结果", response.data);
          this.bomInfos = response.data;
          this.initChartData();
          this.initPieChart("sumchart");
          this.isSearching = false;
        })
        .catch((error) => {
          this.isSearching = false;
          console.log(error);
        });
    },
    formatNum(value) {
      if (!value) return 0;
      if (typeof value === "number") {
        return value.toFixed(2); // 保留小数点后两位
      } else {
        return value; // 其他类型的数据原样返回
      }
    },
    initChartData() {
      let values = [];
      try {
        this.bomInfos.forEach((bomInfo) => {
          values.push({
            name: bomInfo.child_erp_id + "-" + bomInfo.child_name,
            value: this.formatNum(
              bomInfo.priceInfo ? bomInfo.priceInfo.KEPH_SUM : 0
            ),
          });
        });
      } catch (error) {
        console.error(error);
      }

      this.chartDatas = values;
    },
    initPieChart(elementName) {
      const chartDom = document.getElementById(elementName); // 获取DOM元素

      if (chartDom == null || chartDom == undefined) return;

      const myChart = echarts.init(chartDom); // 初始化echarts对象

      chartDom.setAttribute("_echarts_instance_", ""); //将生成的图标ID清除掉，让每次切换路由都能更新

      const option = {
        legend: {
          bottom: "0%",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "费用",
            type: "pie",
            // radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              formatter: function (params) {
                // return params.name + ": " + params.value.toFixed(2) + "￥";
                return params.name + ": " + params.value + "￥";
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: this.chartDatas,
          },
        ],
      };

      option && myChart.setOption(option);

      let erd = elementResizeDetectorMaker();

      //动态适应父项DIV的宽度变化
      erd.listenTo(document.getElementById(elementName), () => {
        nextTick(() => {
          myChart.resize();
        });
      });
    },
  },
};
</script>
